import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export default async function handler(request: Request) {
  const { searchParams } = new URL(request.url);

  const title = searchParams.get("title");
  const description = searchParams.get("description");

  return new ImageResponse(
    <div
      style={{
        height: "100%",
        width: "100%",
        backgroundImage:
          'url("")',
        backgroundSize: "cover",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        padding: "80px",
        paddingTop: "230px",
        // fontFamily: "Inter",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          textAlign: "left",
          color: "white",
          // 1200px width - 2 * 80px padding
          width: "1040px",
          maxWidth: "1040px",
        }}
      >
        <div
          style={{
            fontSize: "52px",
            fontWeight: 900,
            letterSpacing: "-1px",
            marginBottom: 12,
          }}
        >
          {title}
        </div>
        {description && (
          <div
            style={{
              fontSize: "36px",
              opacity: 0.9,
              lineHeight: "1.3",
              letterSpacing: "-1px",
            }}
          >
            {description}
          </div>
        )}
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
    },
  );
}
